<template>
	<view>

		<view class="">

			<view class="b_y" :style="'background-color: #fff;width: '+ tan_width +'px;'">
				<view class="p1">

				</view>
				<view class="p2  flex j-c">
					<image mode="widthFix" :src="fx_haobao"></image>
				</view>
				<!-- #ifdef H5 -->
				<view class="flex j-s a-c  ">
					<view class=" t_c">
						<view class="">
							<text class="c_7">长按图片保存到相册</text>
						</view>
					</view>
				</view>
				<view class="" style="height: 10px;">

				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="flex j-s a-c pb3">
					<!-- 		<view class=" t_c">
						<image style="width: 60px;height: 60px;" src="../../static/logo.png"></image>
						<view class="">
							<text class="c_7">分享到好友</text>
						</view>
					</view> -->
					<view class="t_c" @click="downloadFile(fx_haobao)">
						<image style="width: 30px;height: 30px;" src="../../static/xiangce.png"></image>
						<view class="">
							<text class="c_7 f28">保存到相册</text>
						</view>
					</view>
				</view>
				<!-- #endif -->


			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {

			fx_haobao: {
				//最大宽高尺寸像素
				type: String,
				default: ''
			},
			width: {
				//最大宽高尺寸像素
				type: Number,
				default: 0
			},
			height: {
				//最大宽高尺寸像素
				type: Number,
				default: 0
			},

		},
		data() {
			return {

				context_true: false,
				tan_width: 300,
			}
		},
		mounted() {
			this.tan_width = uni.getSystemInfoSync().windowWidth / 1.3;
		},
		methods: {
			// 下载文件
			downloadFile(file) {
				let acceptArr = ["JPG", "PNG", "JPEG"]
				const fileSuffix = file.substring(file.lastIndexOf(".") + 1).toUpperCase();
				//加载框动画
				uni.showLoading({
					title: '正在下载……'
				});

				uni.downloadFile({ //只能是GET请求
					url: file, //请求地址(后台返回的码流地址)
					success: (res) => {
						//下载成功
						if (res.statusCode === 200) {
							uni.hideLoading(); //隐藏加载框
							//保存文件
							var tempFile = res.tempFilePath;
							console.log(tempFile, res, 'tempFilePath')
							if (acceptArr.indexOf(fileSuffix) >= 0) {
								console.log('图片')
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: "保存成功",
											icon: "none"
										});
									},
									fail: function() {
										uni.showToast({
											title: "保存失败，请稍后重试",
											icon: "none"
										});
									}
								});
							} else {
								console.log('文件')
								//保存成功之后 打开文件
								uni.openDocument({
									filePath: tempFile,
									showMenu: true, //微信小程序 downloadFile生成的tempFilePath为临时路径无法直接保存到手机 显示菜单设置可以手动保存到手机本地
									fail: (e) => {
										console.log(e, '打开失败')
										let nowEno = uni.getSystemInfoSync().platform; //当前环境
										console.log(e, '打开失败', nowEno)
										if (nowEno == 'ios') { //ios打开临时路径文件失败 设置ios环境下读取临时路径文件可以打开
											uni.getFileSystemManager().readFile({
												filePath: tempFile,
												success: res => {
													var filebuffer = res.data
													return filebuffer
												},
												fail: console.error
											})
										} else {
											uni.showToast({
												title: '打开失败'
											})
										}

									}
								})

							}
						}
					},
					fail: (e) => {
						console.log(e, '文件下载失败')
						uni.showToast({
							title: '文件下载失败',
							icon: "none",
						})
					}
				});

			}

		}
	}
</script>

<style>
	.set_but {
		width: 50px;
		height: 30px;
	}

	.dibu {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		height: 120rpx;
		width: 100%;
		border-top: solid 1rpx #f2f2f2;
	}
</style>